<template>
	<view class="login">
		<view class="navigateBack">
			<img src="https://lesson.iapeap.com/images/fanhuibai.png" alt="" style="width: 50rpx; height: 50rpx;"
				@click="gt()" />
			<view class="navigationTitle">
				注册
			</view>
			<img src="https://lesson.iapeap.com/home.png" alt="" style="width: 50rpx; height: 50rpx;" />
		</view>
		<view class="user">
			<img class="ysz" src="https://lesson.iapeap.com/images/sleep/yishuzi1.png" alt="" />
			<input v-model="invitationCode" class="uni-input" maxlength="11" placeholder-style="color:#C2C0C0"
				placeholder="请输入您的邀请码" />
			<input v-model="nickName" class="uni-input" maxlength="11" placeholder-style="color:#C2C0C0"
				placeholder="请输入昵称" />
			<input v-model="userName" class="uni-input" maxlength="11" placeholder-style="color:#C2C0C0"
				placeholder="请输入账号" />
			<input v-model="passWord" class="uni-input" password type="text" placeholder-style="color:#C2C0C0"
				placeholder="请输入密码" />
			<view class="center">
				<view class="register" @click="onRegister">
					注册
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		userRegister
	} from '@/utils/getDate.js';

	export default {
		data() {
			return {
				nickName: "",
				userName: "",
				passWord: "",
				invitationCode: ""
			};
		},
		methods: {

			onRegister() {
				if (!this.nickName || !this.userName || !this.passWord || !this.invitationCode) {
					uni.showToast({
						icon: "error",
						title: "未完整填写信息"
					})

				} else {
					this.Register()
				}
			},
			Register() {
				uni.showLoading({
					title: "正在注册"
				})

				let data = {
					invitationCode: this.invitationCode,
					nickName: this.nickName,
					userName: this.userName,
					passWord: this.passWord,
				}

				userRegister(data)
					.then(res => {
						if (res.zdmemberId) {
							uni.showToast({
								title: "注册成功"
							})
							setTimeout(function() {
								uni.redirectTo({
									url: "/pages/index/index"
								})
							}, 1000);
							uni.setStorageSync("userId", res.zdmemberId)
							uni.setStorageSync("uid", res.zdmemberId)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}



					}).catch(error => {

						console.log("注册失败失败")
					})

			},
			gt() {
				uni.navigateBack()
			}

		},
	};
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		height: 100vh;
		background-image: url("https://lesson.iapeap.com/images/sleep/LOGINGB.png");
		background-size: 100% 100%;

		.user {
			width: 748rpx;
			min-height: 748rpx;
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0.7) 0%,
					rgba(255, 255, 255, 0.68) 25%,
					rgba(255, 255, 255, 0.9) 49%,
					#ffffff 100%);
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(210, 210, 210, 0.6),
				inset 0rpx 0rpx 6rpx 2rpx #ffffff;
			backdrop-filter: blur(3px);
			position: absolute;
			bottom: 0;
			border-radius: 35rpx;
			box-sizing: border-box;
			padding: 72rpx 34rpx 150rpx 42rpx;

			.ysz {
				width: 524rpx;
				height: 64rpx;
			}

			.uni-input {
				width: 668rpx;
				height: 92rpx;
				background: #ffffff;
				box-shadow: 0rpx 4rpx 16rpx 0rpx #c3ccd7;
				border-radius: 200rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-top: 52rpx;
			}

			.loginbtn {
				display: flex;
				justify-content: center;
				margin-top: 72rpx;

				.loginimg {
					width: 360rpx;
					height: 110rpx;
				}
			}
		}
	}

	.register {
		width: 200rpx;
		height: 76rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 21%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.24) 100%);
		box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(96, 156, 230, 0.9);
		border-radius: 200rpx;
		background-color: rgb(96, 156, 230, 0.9);
		text-align: center;
		font-family: LiuhuanKatongShoushu;
		font-size: 40rpx;
		color: #FFFFFF;
		letter-spacing: 4px;
		font-style: normal;
		line-height: 76rpx;
	}

	.center {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}

	.navigateBack {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 100rpx 40rpx 0rpx 40rpx;
		box-sizing: border-box;
		color: #fff;
	}
</style>